<template>
    <div>
        <div ref="durationChart" style="width:130px;height:200px;margin-left:15px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { importAnonymizeData, importAnonymizeGraphData } from '../../../homePage/components/listPage/dataAccess/api/echartsChatApi'
import { anonymizeScreenOption } from '../../../../utils/js/point'
export default {
    data() {
        return {
            allData: []
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async chartRender(params) {
            if (params == '城市') {
                this.getData();
            } else if (params == '图商') {
                const res = await importAnonymizeGraphData()
                this.allData = res.data.data;
                this.initChart()
            }
        },
        async getData() {
            const res = await importAnonymizeData()
            this.allData = res.data.data;
            this.initChart();
        },
        // 初始化echart
        initChart() {
            var duration = this.allData.map(item => {return item.duration}).reverse().slice(0, 5)
            var yAxisData = this.allData.map(item => {return item.area}).slice(0, 5)
            var myChart = echarts.init(this.$refs.durationChart);
            anonymizeScreenOption.yAxis.data = yAxisData;
            anonymizeScreenOption.series[0].name = '时长';
            anonymizeScreenOption.series[0].color = '#07AB68';
            anonymizeScreenOption.series[0].data = duration;
            myChart.setOption(anonymizeScreenOption);
            // 图表自适应
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    }
}
</script>